<template>
	<teleport to="#pople">
		<div :class="['mask', visible ? 'active': '']">
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</teleport>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps<{
	visible: boolean
}>()

</script>

<style lang="scss" scoped>
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba($color: #000000, $alpha: .6);
	z-index: 10;
	transform: translateY(100%);
	transition: all 2s;
	&.active {
		transform: translateY(0);
	}
	.content {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60%;
		border-top-left-radius: 50px;
		border-top-right-radius: 50px;
		background-color: white;
		width: 100%;
		padding: 20px;
	}
}


</style>